<template>
  <div id="main">
    <el-container>
      <el-header>
        <h1>提交详情</h1>
      </el-header>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="编译信息">
            <h3>题目:{{result.problem_id}} 提交详情</h3>
            <div v-if="youareright">
              <el-button type="success" icon="el-icon-check" circle></el-button>
              <el-button type="success" icon="el-icon-check" circle></el-button>
              <el-button type="success" icon="el-icon-check" circle></el-button>
              <el-button type="success" icon="el-icon-check" circle></el-button>
              <el-button type="success" icon="el-icon-check" circle></el-button>
              <h2>{{ result_value }} </h2>

            </div>
            <div v-else>
              <el-button type="danger" icon="el-icon-close" circle></el-button>
              <el-button type="danger" icon="el-icon-close" circle></el-button>
              <el-button type="danger" icon="el-icon-close" circle></el-button>
              <el-button type="danger" icon="el-icon-close" circle></el-button>
              <el-button type="danger" icon="el-icon-close" circle></el-button>
              <h2>{{ result_value }} </h2>
              <h3>错误类型: {{result.judge}}</h3>
            </div>
          </el-tab-pane>
          <el-tab-pane label="源代码">
            <!-- <AceEditor v-model="code" mode="C" theme="github" /> -->
            <span>{{result.code}}</span>
          </el-tab-pane>
        </el-tabs>
        <br>
        <br>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="pk" label="提交ID" width="180">
          </el-table-column>
          <el-table-column prop="fields.problem_id" label="题号" width="180">
          </el-table-column>
          <el-table-column prop="fields.created_time" label="提交时间">
          </el-table-column>
          <el-table-column prop="fields.judge" label="提交结果">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import AceEditor from './AceEditor.vue'; // 导入 AceEditor 组件
  import axios from 'axios';
  import eventBus from '../utils/eventBus'
  import {
    config
  } from '../utils/constant.js'
  export default {
    components: {
      AceEditor
    },
    data() {
      return {
        submissions: [],
        response_1: "666",
        result: {},
        tableData: [{
          pk: 0,
          problem_id: 0,
          time: 0,
          address: 0,
        }, ],
        code: "",

      };
    },
    props: {
      message: {
        type: String,
        default: ''
      }
    },
    created() {
      console.log(this.$route)
      //侧边消息提示框
      const h = this.$createElement;
      this.$notify({
        title: '',
        message: h('i', {
          style: 'color: teal',

        }, '提交成功!!'),
        duration: 1500
      });

      let msg;
      let _self = this
      console.log(JSON.parse(sessionStorage.getItem('response')))
      this.response_1 = JSON.parse(sessionStorage.getItem('response')).data.judge

      var FormData = require('form-data');
      var data = new FormData();
      data.append('problem_id', this.$route.query.id);

      //获取token
      const access_token = this.getAccessToken()
      var axios_config = {
        method: 'post',
        url: config.baseUrl + '/judge/list/',
        headers: {
          'Authorization': 'Bearer ' + access_token,
        },
        data: data
      };

      axios(axios_config)
        .then(function (response) {
          console.log(response.data.data.length)

          // for (let i = 1; i < response.data.data.length + 1; i++) {
          //   console.log(response.data.data[1])
          //   response.data.data[i] = {
          //     paixu: i,
          //     ...response.data.data[i]
          //   }
          // }
          _self.tableData = [...response.data.data].reverse()
          _self.result = _self.tableData[0].fields

          //code
          _self.code = _self.result.code

        })
        .catch(function (error) {
          console.log(error);
        });
    },
    mounted() {
      // const axiosconfig = {
      //   method: 'post',
      //   url: config.baseUrl + '/judge/list/',
      //   headers: {
      //     'Content-Type': 'application/json'
      //   },
      //   data: {
      //     message: this.message
      //   }
      // }
      // axios.post(axiosconfig)
      //   .then((response) => {
      //     console.log(response)
      //   })
      //   .catch((error) => {

      //   })
    },
    computed: {
      result_value() {
        let text;
        if (this.result.judge == "compile error" && this.result !== "") {
          text = "编译错误!!"
        } else if (this.result.judge == "WA") {
          text = "答案错误!!"
        } else if (this.result.judge == "timelimit error") {
          text = "提交超时!!"
        } else if(this.result.judge == "AC"){
          text = "答案正确!!"
        }else {
          text = "未知错误!!"
        }
        return text
      },
      youareright() {
        return this.result.judge == "AC"
      }
    },
    methods: {
      getAccessToken() {
        // 使用正则表达式来匹配名为'accesetoken'的cookie
        const name = 'access_token=';
        const decodedCookie = decodeURIComponent(document.cookie);
        const ca = decodedCookie.split(';');
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i];
          while (c.charAt(0) === ' ') {
            c = c.substring(1);
          }
          if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      }
    },
  };
</script>

<style scoped>
  #main {
    background: linear-gradient(to bottom right, #e0f7fa, #b3e5fc);
    /* 以下属性可以使背景覆盖整个页面 */
    height: 100vh;
    margin: 0;
    padding: 0;
  }

  h1 {
    color: #409EFF;
    text-align: center;
    margin: 20px 0;
  }
</style>